<template>
  <!-- 全屏组件 -->
  <div class="" @click="onToggle">
    <span id="guide-full" v-if="isFullscreen" class="icon iconfont icon-quanping"></span>
    <span  id="guide-full" v-else class="icon iconfont icon-tuichuquanping"></span>
  </div>
</template>

<script setup >
import { ref,onMounted,onUnmounted } from "vue";
//导入我们的全屏插件
import screenfull from "screenfull";

//是否全屏
const isFullscreen = ref(false);

//触发事件
const onToggle = () => {
  //使用screenfull中的toggle方法就可以实现全屏切换了
  screenfull.toggle()
  console.log(screenfull.isFullscreen);
};

//监听screenfull的变化 看是不是全屏
const change = () =>{
  isFullscreen.value = screenfull.isFullscreen
}
//on:绑定监听
onMounted(()=>{
  screenfull.on('change',change)
})
//off:取消监听
onUnmounted (()=>{
  screenfull.off('change',change)
})
</script>

<style scoped>
.icon{
  font-size: 28px;
}
</style>